<template>
  <div class="">

    <div class="title"><span class="cred">*</span>您选中了{{ids.length}}位客户，批量修改以下信息，保存前建议二次确认</div>

    <el-form :model="updateForm" :rules="updateFormRules" label-width="100px">
      <el-form-item label="负责人：" prop="principalIds">
        <el-select v-model="updateForm.principalIds" multiple filterable class="a_select">
          <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="来源：" prop="channelSource">
        <el-select v-model="updateForm.channelSource" filterable @change="getAdCodeList" class="a_select">
          <el-option v-for="(item,index) in sourceList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="广告代号：" prop="adSource">
        <el-select v-model="updateForm.adSource" filterable class="a_select">
          <el-option v-for="(item,index) in adCodeList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市：" prop="city">
        <el-select v-model="updateForm.city" filterable class="a_select">
          <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" size="small" @click="saveInfo" :loading="loading">确认修改</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import {
  GETCITYOPTIONS,
  GETADSOURCEOPTIONS,
  GETCHANNELSOURCEOPTIONS,
  GETUSEROPTIONS,
} from "@/http/system";
import { BATCHMODIFYCUSTOMER } from "@/http/customer";
import { deepClone, showToast } from "@/common/util";
export default {
  name: "EditCustomer",
  props: {
    ids: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      updateForm: {},
      userList: [],
      cityList: [],
      sourceList: [],
      adCodeList: [],
      updateFormRules: {},
      loading: false,
    };
  },
  mounted() {
    console.log(this.ids);
    this.getUser();
    this.getCity();
    this.getSource();
  },
  methods: {
    // 获取负责人列表
    getUser(name) {
      GETUSEROPTIONS({ username: name }).then((res) => {
        this.userList = res.data || [];
      });
    },

    // 获取所有城市
    getCity() {
      GETCITYOPTIONS().then((res) => {
        this.cityList = res.data || [];
      });
    },

    // 获取所有广告来源
    getSource() {
      GETCHANNELSOURCEOPTIONS().then((res) => {
        this.sourceList = res.data || [];
      });
    },

    // 获取广告代号
    getAdCodeList(id) {
      if (this.updateForm.adSource) {
        //this.$set(this.updateForm, "adSource", "");
        delete this.updateForm.adSource;
      }

      GETADSOURCEOPTIONS({ csId: id }).then((res) => {
        this.adCodeList = res.data || [];
      });
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      let o = deepClone(_this.updateForm);
      if (
        (!o.principalIds || o.principalIds.length <= 0) &&
        !o.channelSource &&
        !o.adSource &&
        !o.city
      ) {
        showToast({
          message: "最少选择一项",
        });
        return false;
      }
      let m = this.ids;
      let arr = [];
      this.ids.map((k) => arr.push(k.id));
      o.principalIds = o.principalIds;
      o.clueIds = arr;

      if (o.city) {
        let _city = _this.cityList.find((k) => k.code == o.city);
        o.cityName = _city ? _city.name : "";
      }

      console.log(o);
      _this.loading = true;
      BATCHMODIFYCUSTOMER(o)
        .then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "修改成功",
              type: "success",
            });
            _this.$emit("change", { id: "editDialog" });
          }
        })
        .catch((error) => {
          _this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 14px;
  margin: 0 0 20px 0;
  .cred {
    color: #f00;
  }
}
.a_select {
  width: 300px;
}
</style>